<div th:fragment="control_chart_base">
<script type="text/javascript">
	/** 图表元数据父类 */
	function metadata_chart_base(params)
	{
		params = $.extend({}, {
			TITLE : {
				TEXT : "图表标题",
				TEXT1 : "",
				HIDE : false
			},
			SIZE : {
				HEIGHT : 300,
				WIDTH : 90
			},
			OPTION : {}
		}, params);
		return $.extend(new metadata_base(params), this);
	}
	/** 图表 控制面板 控制器 */
	function metadata_view_chart_base(control)
	{
		this.control = control;
		this.validate = function()
		{
			//校验标题
			var t = control.getMetadata("TITLE").TEXT;
			if (!t)
			{
				$.QuickAlert.alertFail({
					content : "标题不能为空"
				});
				return false;
			}
			//如果是指标视图页面，校验SQL
			if (isZbst)
			{
				var s = control.getMetadata("OPTION").sql;
				if (!s)
				{
					$.QuickAlert.alertFail({
						content : "SQL不能为空"
					});
					return false;
				}
			}
			return true;
		}
		this.linkViewOption = function(option)
		{
			this.control.setMetadata("OPTION", option);
		}
		this.SIZE = function()
		{
			var metadataName = "SIZE";
			var view = $($("#" + metadataName).html());
			var metadata = this.control.getMetadata();
			var _this = this;
			var mValue = metadata[metadataName];
			$(view).find("input[name=width]").val(mValue.WIDTH);
			$(view).find("input[name=height]").val(mValue.HEIGHT);
			$(view).find("input").keyup(function()
			{
				_this.linkageMetadata(metadataName, {
					WIDTH : $("input[name=width]").val(),
					HEIGHT : $("input[name=height]").val()
				});
			}).popoverBind();
			$(this.settingPanel).append(view);
		}
		this.TITLE = function()
		{
			var metadataName = "TITLE";
			var view = $($("#" + metadataName).html());
			var metadata = this.control.getMetadata();
			var _this = this;
			var mValue = metadata[metadataName];
			/** 赋值 */
			if (mValue)
			{
				var HIDE = mValue["HIDE"];
				$(view).find("input:checkbox[name='SHOW']").prop("checked", HIDE);
				var TEXT = mValue["TEXT"];
				$(view).find("input[name=title]").val(TEXT);
				var TEXT1 = mValue["TEXT1"];
				$(view).find("input[name=title1]").val(TEXT1);
			}

			$(view).find("input:checkbox[name='SHOW']").on("change", function()
			{
				var value = $(this).prop("checked");
				mValue["HIDE"] = value;
				_this.linkageMetadata(metadataName, mValue);
			});
			$(view).find("input:text").on("keyup", function()
			{
				var value = $(view).find("input[name=title]").val();
				mValue["TEXT"] = value;
				var value1 = $(view).find("input[name=title1]").val();
				mValue["TEXT1"] = value1;
				_this.linkageMetadata(metadataName, mValue);
			}).popoverBind();
			/**图标选择*/
			$(view).find("button").on("click", function()
			{
				ImgSelectModel.show(function(id)
				{
					mValue["IMG_ID"] = id;
					_this.linkageMetadata(metadataName, mValue);
				})
			})
			$(this.settingPanel).append(view);
		};
		/** 选项设置 使用echart编辑器 */
		this.OPTION = function()
		{
			var metadataName = "OPTION";
			var view = $($("#" + metadataName).html());
			var metadata = this.control.getMetadata();
			var editor = initEditor($(view).find(".echart-editor-code-panel")[0]);
			editor.$blockScrolling = "Infinity";// 忽略警告信息
			var mValue = metadata[metadataName];
			editor.setValue("var option = " + JSON.stringify(mValue, null, '\t') + "\n", -1);

			var _this = this;
			$(view).find(".control-btn-panel>a").on("click", function()
			{
				var value = editor.getValue();
				value = value.replace("var option = ", '');
				value = JSON.parse(value);
				if (value)
				{
					mValue = value;
					_this.linkageMetadata(metadataName, mValue);
				}
			});
			$(view).find("input:checkbox[name='ADVANCED']").on("change", function()
			{
				var value = $(this).prop("checked");
				if (value)
				{
					$(this).parent().next(".echart-editor-code-container").show();
					$(view).find(".control-btn-panel>a").trigger("click");
				} else
				{
					$(this).parent().next(".echart-editor-code-container").hide();
				}
			}).popoverBind();
			$(this.settingPanel).append(view);
		};
		return $.extend(new metadata_view_base(control), this);
	}

	/** 元数据 表单 视图 */
	function metadata_form_view_chart_base(control)
	{	
		this.control = control;
		$(this.control).find("span.round").remove();
		this.TITLE = function(value)
		{
			var label = $(this.control).find(".h4-title>em:first");
			var TEXT = value["TEXT"];
			$(label).html(TEXT);
			var HIDE = value["HIDE"];
			if (HIDE)
			{
				$(this.control).find(".h4-title").hide();
			} else
			{
				$(this.control).find(".h4-title").show();
//				var IMG_ID = value["IMG_ID"];
//				if (!StringUtils.isEmpty(IMG_ID))
//				{
//					var icon = $(this.control).find(".title-icon:eq(0)");
//					var back = $(icon).css('backgroundImage');
//					back = "/tjfx/image/recriveImage/" + IMG_ID;
//					$(icon).removeAttr("style");
//					$(icon).attr("style", "background:url('" + back + "') no-repeat");
//				}
			}
			var TEXT1 = value["TEXT1"];
			if(TEXT1){
                var title1 = $(this.control).find(".h4-title").children(".h4-title-subtitle");
                if(title1.length<1)
			    title1 = $("<em>").addClass("h4-title-subtitle").html(TEXT1);
                title1.css({"float":"right","marginRight":"15px"});
                $(this.control).find(".h4-title").append(title1);
			}else{
                $(this.control).find(".h4-title").children(".h4-title-subtitle").remove();
			}
		}
		this.SIZE = function(value)
		{
			$(control).find(".echarts-div").height(value.HEIGHT);
			$(control).find(".echarts-div").width(value.WIDTH + "%");
			this.echart.resize();
		}
		this.OPTION = function(value)
		{
			this.echart.setOption(value, true);
		}
		return $.extend(new metadata_form_view_base(control), this);
	}
</script>

<!-- 控制面板 图表 标题 -->
<!--<button type="button" class="btn btn-default btn-sm" style="width: 98%;">选择图标</button>-->
		<!--<label class="checkbox-inline-full">-->
			<!--<input name="SHOW" type="checkbox">隐藏标题-->
		<!--</label>-->
<script type="text/html" id="TITLE">
<div class="form-setting-group">
	<div class="controls">
		<label>图表标题</label>
		<input name="title" class="form-control" data-content="更换图表标题" data-trigger="manual" data-placement="top">
		<label>小标题</label>
		<input name="title1" class="form-control" data-content="更换图表小标题" data-trigger="manual" data-placement="top">
	</div>
</div>
</script>

<!-- 控制面板 图表option -->
<script type="text/html" id="OPTION">
<div class="form-setting-group">
	<label><input name="ADVANCED" type="checkbox"  data-content="自定义图表的option属性" data-trigger="manual">编辑图表OPTION</label>
	<div class="echart-editor-code-container">
		<div class="echart-editor-code-panel"></div>
		<div id="control-panel">
			<div class="control-btn-panel">
				<a href="javascript:;" class="btn btn-default btn-sm">Run</a>
			</div>
		</div>
	</div>
</div>
</script>

<!-- 控制面板 图表 高度 -->
<script type="text/html" id="SIZE">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td colspan="4">图表尺寸</td>
		</tr>
		<tr>
			<td class="setting-control-label" >宽度(%)</td>
			<td><input name="width" class="form-control" data-content="图表的宽度占比" data-trigger="manual" data-placement="bottom"></td>
			<td class="setting-control-label">高度(px)</td>
			<td><input name="height" class="form-control" data-content="图表的高度像素大小" data-trigger="manual" data-placement="bottom"></td>
		</tr>
	</table>
</div>
</script>

<!-- 控制面板 图表 图例 -->
<script type="text/html" id="LEGEND">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td colspan="4">图例组件</td>
		</tr>
		<tr>
			<td class="setting-control-label">宽度(%)</td>
			<td><input name="width" class="form-control"></td>
			<td class="setting-control-label">高度(px)</td>
			<td><input name="height" class="form-control"></td>
		</tr>
	</table>
</div>
</script>
</div>